<template>
  <!-- <vue-scroll :ops="ops"> -->

  <!-- <div class="chart-container"> -->
  <div class="app-container">
    <div class="search">
      <el-form ref="searchFormDom" :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="设备编号" prop="device">
          <el-input v-model="listQuery.device" class="mt_12" size="small" style="width: 376px; margin-right: 65px;"
            placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-select v-model="searchForm.state" size="small" style="width: 376px; margin-right: 65px;"
            placeholder="请选择">
            <!-- <el-option label="已上线" value="shanghai"></el-option> -->
            <el-option label="正常" value="beijing"></el-option>
            <el-option label="异常" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onQuery" style="width: 90px;" size="small"> 查询</el-button>
          <!-- <el-button @click="onReset" style="width: 90px;" size="small"> 重置</el-button> -->

        </el-form-item>
        <!-- <el-form-item>
          <div style="color: #1890FF;">
            展开
            <i class="el-icon-arrow-down"></i>
          </div>
        </el-form-item> -->
      </el-form>
      <!-- <el-button type="primary" @click="onAdd" style="width: 90px;" class="mt_30" size="small"
        icon="el-icon-plus">新建</el-button>
      <el-button @click="onBatchOperation" style="width: 90px;margin-right: 14.5px;" size="small">批量操作</el-button>
      <el-select v-model="operation" placeholder="更多操作" style="width: 135px;">
        <el-option label="更多操作" value="更多操作"></el-option>
        <el-option label="操作一" value="shanghai"></el-option>
        <el-option label="操作二" value="beijing"></el-option>
      </el-select> -->
    </div>
    <div class="connect">
      <div class="tip">
        <div class="tip-detial">
          <i class=" el-icon-warning" style="color: #1890FF;"></i>
          已选择<span style="color: #1890FF;">{{ selectNumber }}</span>项
        </div>
        <div style="color: #1890FF;cursor: pointer;" @click="onclearAll">清空</div>
      </div>
    </div>
    <!-- <vue-scroll :ops="ops"> -->
    <!-- <el-table ref="deviceTable" :data="tableData" tooltip-effect="dark" style="width: 100%;height: 100%;"
      :header-cell-style="{ backgroundColor: '#fafafa', color: '#000' }" :cell-style="{ color: '#000' }"
      @selection-change="handleSelectionChange"> -->

    <el-table ref="deviceTable" :key="tableKey" v-loading="listLoading" :data="tableData" border fit
      highlight-current-row style="width: 100%;" @selection-change="handleSelectionChange">
      <el-table-column type="selection" align="center" width="55">
      </el-table-column>

      <el-table-column prop="device" align="center" label="设备编号" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="ip" align="center" label="IP地址" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="sn" align="center" label="SN" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="state" align="center" label="状态" show-overflow-tooltip>
            <template slot-scope="scope">
              <div class="flexCenter">
                <div class="drop" :style="{ backgroundColor: stateColor[scope.row.state].color }"></div>
                <div style="width: 50px; text-align: center;">
                  {{ stateColor[scope.row.state].title }}
                </div>
              </div>
            </template>
          </el-table-column>
      <el-table-column prop="datetime" align="center" label="更新时间" show-overflow-tooltip>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="{row,$index}">
          <!-- <el-button @click.native.prevent="onEdit()" type="text" size="small">
                编辑
              </el-button> -->
          <el-button type="text" size="mini" @click="handleUpdate(row)">
            编辑
          </el-button>
          <!-- <i class="el-icon-refresh refresh" @click="onInitialization()"></i> -->

        </template>
      </el-table-column>
    </el-table>
    <div class="foot">
      <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
        @pagination="loadData" />
    </div>

    <!-- 编辑弹框 -->
    <el-dialog :title="'编辑'" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="80px"
        style="width: 400px; margin-left:50px;">

        <el-form-item :label="'设备编号'" prop="device">
          <el-input v-model="temp.device" :disabled="true" />
        </el-form-item>
        <el-form-item :label="'sn'" prop="sn">
          <el-input v-model="temp.sn" :disabled="true" />
        </el-form-item>
        <el-form-item :label="'ip'" prop="ip">
          <el-input v-model="temp.ip" />
        </el-form-item>
        <el-form-item :label="'更新时间'" prop="datetime">
          <el-date-picker v-model="temp.datetime" type="datetime" placeholder="Please pick a date" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          {{ $t('table.cancel') }}
        </el-button>
        <el-button type="primary" @click="updateData()"">
            {{ $t('table.confirm') }}
          </el-button>
        </div>
      </el-dialog>
      <!-- <chart height=" 100%" width="100%" /> -->
      </div>

      <!-- </vue-scroll> -->
</template>

  <script>
  import Chart from '@/components/Charts/Keyboard'
  import Pagination from '@/components/Pagination'
  import { readZuwang, updateZuwang } from '@/api/zuwang'
  export default {
    name: 'device',
    components: { Chart, Pagination },
    data() {
      return {
        deviceTable: '',
        tableKey: 0,
        listLoading: true,
        temp: {
          device: '',
          sn: '',
          ip: '',
          datetime: ''
        },
        dialogFormVisible: false,
        rules: {
          // device: [{ required: true, message: 'type is required', trigger: 'change' }],
          // sn: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
          // ip: [{ required: true, message: 'title is required', trigger: 'blur' }]
        },
        total: 0,
        listQuery: {
          page: 1,
          limit: 10,
          importance: undefined,
          title: undefined,
          type: undefined,
          sort: '+id'
        },
        searchForm: {
          deviceId: '',
          state: '',

        },
        listLoading: true,
        // 操作
        operation: '更多操作',
        // 表格数据
        tableData: [],
        // 状态数据列表
        stateColor: [
          // {
          //   color: '#BFBFBF',
          //   title: '关闭'
          // },
          {
            color: '#F5222D',
            title: '异常'
          }
          , {
            color: '#1890FF',
            title: '未识别'
          }
          , {
            color: '#A2EF4D',
            title: '正常'
          }
        ],
        // 被选中的行集合
        selectList: [

        ]
      }
    },
    computed: {
      // 选中了多少个
      selectNumber() {
        return this.selectList.length
      },
      zuwangFromJS() {
        return this.$store.getters.zuwangFromJS
      }
    },
    methods: {
      async loadData() {
        //请求网络数据
        // this.listLoading = true
        this.listLoading = true

        try {

          const result = await readZuwang(this.listQuery)
          // console.log(result.data)
          // this.tableData.push(result.data)
          this.tableData = result.data.data
          // console.log(result.data.length)
          this.total = result.data.total
        } catch (error) {
          this.listLoading = false
        }

        setTimeout(() => {
          this.listLoading = false
        }, 1 * 1000)
      },
      onSubmit() {
        console.log('submit!');
      },
      onQuery() {
        // alert('点击了查询')
        this.loadData(this.listQuery)
      },
      // 重置
      onReset() {
        this.$refs['searchFormDom'].resetFields();
      },
      // 添加
      onAdd() {
        alert('点击了添加')
      },
      // 批量操作
      onBatchOperation() {
        alert('点击了批量操作')
      },
      // 编辑
      // onEdit() {
      //   alert('点击了编辑')
      // },
      // 初始化
      onInitialization() {
        alert('点击了初始化')
      },
      // 选中行事件
      handleSelectionChange(list) {
        this.selectList = list
        console.log(this.selectList.length);
      },
      // 清空
      onclearAll() {
        this.$refs.deviceTable.clearSelection();
      },
      // 开关
      onChangeSwitch() {
      },
      // 更新操作
      handleUpdate(row) {
        this.temp = Object.assign({}, row) // copy obj
        // this.temp = this.tableData[row] // copy obj
        this.temp.datetime = new Date(this.temp.datetime)
        // this.dialogStatus = 'update'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      updateData() {
        this.$refs['dataForm'].validate(async (valid) => {
          if (valid) {
            const tempData = Object.assign({}, this.temp)
            console.log(tempData)
            // let datetime = new Date(tempData.datetime) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
            const dayjs = require('dayjs');

            // 假设你有一个时间戳
            const timestamp = tempData.datetime; // 示例时间戳

            // 使用dayjs转换时间戳
            const formattedDate = dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss');

            console.log(formattedDate); // 输出转换后的日期和时间
            this.temp.datetime = formattedDate
            const result = await updateZuwang(this.temp)
            console.log(result)
            this.dialogFormVisible = false
          }
        })
      },
    },
    mounted() {
      this.loadData(this.listQuery);
    },
    watch: {
      zuwangFromJS: function (newValue, oldValue) {
        // 当state的值变化时，这个函数会被调用
        console.log('The new state is: ' + newValue);
        // 你可以在这里根据新的state值进行相应的操作

        //请求网络数据 刷新页面
        // this.$store.dispatch('zuWang/setZuwangFromJS', '1')
        this.loadData(this.listQuery)
      },
      zuwangRes: function (newValue, oldValue) {
        // 当state的值变化时，这个函数会被调用
        console.log('The new state is: ' + newValue);
        // 你可以在这里根据新的state值进行相应的操作

        //请求网络数据 刷新页面
        // this.$store.dispatch('zuWang/setZuwangFromJS', '1')
        this.loadData(this.listQuery)
      }
    }

  }

</script>

  <style scoped>
  .chart-container {
    /* position: relative; */
    width: 100%;
    height: 100%;
    /* height: calc(100vh - 152px); */
    padding: 20px;
    background-color: #ffffff;
    font-family: SourceHanSansSC-regular;
    font-size: 16px;
  }



  .search {
    width: 100%;

  }

  .connect {
    /* height: calc(100vh - 344px); */
    height: 100;
    overflow: hidden;
  }

  .foot {
    display: flex;
    justify-content: end;
  }

  .tip {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    padding-left: 20px;
    background-color: #E6F7FF;
  }

  .tip-detial {
    margin-right: 60px;
  }

  .refresh {
    color: #54BCBD;
    font-size: 16px;
    font-weight: 800;
    margin-left: 40px;
  }

  .drop {
    width: 13px;
    height: 13px;
    border-radius: 16px;
  }

  ::v-deep .el-pagination.is-background .btn-prev {
    background-color: #ffffff;
    border: 1px solid #D9D9D9;
  }

  ::v-deep .el-pagination.is-background .el-pager li {
    background-color: #ffffff;
    border: 1px solid #D9D9D9;
  }

  ::v-deep .el-pagination.is-background .btn-next {
    background-color: #ffffff;
    border: 1px solid #D9D9D9;
  }
</style>
